<template>
  <header class="header">
    <div class="line">
      <div class="icon"></div>
      <search-bar />
      <div class="btn-group" v-if="showUser">
        <base-button :icon="'wode'" :name="'注册'" />
        <RightButton :icon="'wode'" :name="'登录'" />
      </div>
	  <div class="btn-user" v-else>
	    <router-link to="/">{{userName}}</router-link><span>,欢迎回来</span>
		<button class="logout" @click="logout()">退出</button>
	  </div>
    </div>
    <nav class="nav">
      <div class="nav-list">
        <router-link class="link" to="/">
          <div class="nav-item">首页</div>
        </router-link>
        <router-link class="link" to="/bookshelf" replace>
                <div class="nav-item">书架</div>
              </router-link>
        	
              <router-link class="link" to="/rank" replace>
                <div class="nav-item">排行榜</div>
              </router-link>
        	
        	<router-link class="link" to="/pay" replace>
        	  <div class="nav-item">充值</div>
        	</router-link>
      </div>
    </nav>
  </header>
</template>

<script>
import SearchBar from "../components/BaseSearchBar";
import BaseButton from "../components/BaseButton";
import RightButton from "../components/RightButton"

export default {
  components: {
    SearchBar,
    BaseButton,
	RightButton
  },
  data(){
	  return{
		  showUser:true,
		  userName:''
	  }
  },
  methods:{
	  login(){
		  this.userName = localStorage.getItem('userName');
		  if(this.userName){
			  this.showUser = false
		  }else{
			  this.showUser = true
		  }
		  
	  },
	   logout(){
	       this.$store.commit("refresh")
	        window.localStorage.clear()
	        window.location.reload()
	        this.$route.push("/home")
	      }
  },
created() {
	this.login()
}
};
</script>

<style lang="less" scoped>
@import "../styles/mixins.less";

.btn-user{
	position: relative;
	left: -140px;
}
.logout{
	border: none;
	background-color: white;
	margin-left: 10px;
	color: blue;
}
.logout:hover{
	cursor: pointer;
}

.header {
  background: #fff;
  min-width: 900px;
  padding-top: 25px;
  .line {
    padding: 0 10%;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      min-width: 112px;
      height: 44px;
      background: url("../assets/Darway.png") no-repeat;
      background-size: 100% 100%;
    }
    .btn-group {
      display: flex;
      height: 40px;
      width: 174px;
      justify-content: space-between;
    }
  }
  .nav {
    padding: 0 10%;
    background: #4f8dfe;
    min-width: 600px;
    height: 60px;
    display: flex;
    align-items: center;
    .nav-list {
      display: flex;
      justify-content: space-between;
      width: 600px;
      .link {
        color: #fff;
      }
      .nav-item {
        user-select: none;
        line-height: 60px;
        height: 60px;
        box-sizing: border-box;
        padding: 0 20px;

        text-align: center;
        a {
          color: #fff;
        }
        &:hover {
          background: rgba(63, 145, 29, 0.3);
        }
        &::before {
          width: 0;
          height: 100%;
          position: absolute;
          top: 0;
          left: 100%;
          border-bottom: 2px solid #000;
          content: "";
        }
      }
    }
  }
}
</style>